<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name=" apple-mobile-web-app-capable" />
    <meta content="no" name="apple-touch-fullscreen" />
    <meta content="black" name=" apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection"/>
    <title>剁手一组</title>
    <script src="../js/base.min.js"></script>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_961440_4c4uiqn3ajk.css"/>
    <link rel="stylesheet" href="../css/shop.css"/>

</head>
<body>

<!--banner开始-->
<section class="f1">
    <img src="../img/banner.jpg"/>
    <div class="sou" flex="cross:center main:justify">
        <i class="iconfont icon-search"></i>
        <input type="text" placeholder="请输入关键词进行搜索" maxlength="20"/>
    </div>
</section>

<!--第二层开始-->
<section class="f2">
    <ul class="icon" flex="cross:center main:center">
        <li class="a" flex="dir:top cross:center main:center">
            <div class="box1" flex="cross:center main:center">
                <i class="iconfont icon-gaiwanbei"></i>
            </div>
            <p>限时抢购</p>
        </li>

        <li class="a" flex="dir:top cross:center main:center">
            <div class="box2" flex="cross:center main:center">
                <i class="iconfont icon-gaiwan"></i>
            </div>
            <p>坚果炒货</p>
        </li>

        <li class="a" flex="dir:top cross:center main:center">
            <div class="box3" flex="cross:center main:center">
                <i class="iconfont icon-chayeguan"></i>
            </div>
            <p>果干蜜饯</p>
        </li>

        <li class="a" flex="dir:top cross:center main:center">
            <div class="box4" flex="cross:center main:center">
                <i class="iconfont icon-dachahu"></i>
            </div>
            <p>三只松鼠</p>
        </li>

    </ul>

    <ul class="icon" flex="cross:center main:center">
        <li class="a" flex="dir:top cross:center main:center">
            <div class="box5" flex="cross:center main:center">
                <i class="iconfont icon-chalou"></i>
            </div>
            <p>糖果糕点</p>
        </li>

        <li class="a" flex="dir:top cross:center main:center">
            <div class="box6" flex="cross:center main:center">
                <i class="iconfont icon-chajutong"></i>
            </div>
            <p>五谷杂粮</p>
        </li>

        <li class="a" flex="dir:top cross:center main:center">
            <div class="box7" flex="cross:center main:center">
                <i class="iconfont icon-chahu"></i>
            </div>
            <p>膨化视频</p>
        </li>

        <li class="a" flex="dir:top cross:center main:center">
            <div class="box8" flex="cross:center main:center">
                <i class="iconfont icon-beizi"></i>
            </div>
            <p>优惠专区</p>
        </li>

    </ul>
</section>

<!--第三层开始-->
<section class="f3" flex="cross:center main:center" >
    <img src="../img/GO.png"/>
</section>

<!--第四层开始-->
<section class="f4">
    <ul flex="cross:center main:justify">
        <li>
            <div class="title">

                <div class="red" flex="cross:center main:left">
                    <p class="big">优惠券</p>
                    <div class="yuanjiao" flex="cross:center main:center">
                        <p>限时领取</p>
                    </div>
                </div>
                <p class="gray">刷新超低折扣价</p>
            </div>
            <img src="../img/youhui.png"/>
        </li>

        <li>
            <div class="title">

                <div class="red" flex="cross:center main:left">
                    <p class="big">限时抢购</p>
                    <div class="yuanjiao" flex="cross:center main:center">
                        <p>售完为止</p>
                    </div>
                </div>
                <p class="gray">打破电商价格壁垒</p>
            </div>
            <img src="../img/qianggou.png"/>
        </li>

    </ul>

</section>

<!--f5开始-->

<section class="f5">
    <ul flex="cross:center main:justify">
        <li flex="cross:center main:justify">
            <div class="text">
                <p class="a">农庄有趣</p>
                <p class="b">当季蔬果抢鲜</p>
            </div>
            <img src="../img/a.jpg"/>
        </li>

        <li flex="cross:center main:justify ">
            <div class="text">
                <p class="a">积分兑换</p>
                <p class="b">免费领好物</p>
            </div>
            <img src="../img/b.jpg"/>
        </li>


    </ul>

    <ul flex="cross:center main:justify" class="ma">
        <li flex="cross:center main:justify">
            <div class="text">
                <p class="a">一元拼团</p>
                <p class="b">拼团享低价</p>
            </div>
            <img src="../img/c.png"/>
        </li>

        <li flex="cross:center main:justify ">
            <div class="text">
                <p class="a">七折直销</p>
                <p class="b">买到就是赚到</p>
            </div>
            <img src="../img/d.png"/>
        </li>


    </ul>
</section>

<!--第六层开始-->
<section class="f6">
<div class="luntan" flex="cross:center main:justify">
    <img src="../img/lintan.png"/>
    <div class="big">
        <div class="sentence1" flex="cross:center">
            <div class="hot" flex="cross:center main:center">热评</div>
            <p class="aa">风味熟食-就爱这肉感！即食原味麻辣香辣牛...</p>
        </div>

        <div class="sentence2" flex="cross:center">
            <div class="hot" flex="cross:center main:center">热评</div>
            <p class="aa">峰巢蜜蜂蜜天然野生蜂巢盒装纯农家自产新...</p>
        </div>
    </div>

</div>
<div class="video" flex="main:center cross:center">
    <img src="../img/vedio.png"/>
</div>
</section>

<!--第七层开始-->
<section class="f7">

</section>




</body>
</html>